<template>
  <div class="rainfall-info">
    <span class="top-title"> 历史降雨场次：{{ ccCode }}</span>
    <div class="dynamicTable-box">
      <dynamicTable :table-data="rainData" :table-headers="rainDataHeader" />
    </div>
  </div>
</template>
<script setup>
import { ref, defineProps, watch, defineExpose } from 'vue'
import dynamicTable from '@/components/app-publicui/dynamic-table.vue'
import {
  //查询降雨信息
  getAirainData
} from '@/services/modules/intelligent-rainfall/intelligent-rainfall.js'
const props = defineProps({
  scId: {
    type: String,
    default: ''
  }
  // showAttribute: {
  //   type: String,
  //   default: '智能降雨'
  // },
  // zoneId: {
  //   type: String,
  //   default: ''
  // }
})
const rainData = ref([])
const rainDataHeader = ref([])
const ccCode = ref('')
// 查询降雨信息
const handleGetAirainData = () => {
  getAirainData({ scId: props.scId }).then((res) => {
    if (res.data) {
      rainDataHeader.value = res.data.title
      rainData.value = res.data.val
      ccCode.value = res.data.ccCode
    }
  })
}
watch(
  () => {
    props.scId
  },
  async () => {
    //  监听方案id
    await handleGetAirainData()
  },
  {
    deep: true,
    immediate: true
  }
)
// 清楚计算结果
const handleClearResult = () => {
  rainDataHeader.value = []
  rainData.value = []
  ccCode.value = ''
}
defineExpose({ handleGetAirainData, handleClearResult })
</script>
<style lang="less" scoped>
.rainfall-info {
  height: 100%;
  overflow-y: auto;
  .top-title {
    display: inline-block;
    line-height: 50px;
    height: 50px;
  }
  .dynamicTable-box {
    height: calc(100% - 50px);
  }
}
</style>
